<template>
  <el-scrollbar class="h-full">
    <el-card>
      <el-tabs v-model="activeTab" @tab-change="refreshCurrentList">
        <el-tab-pane label="用户管理" name="user">
          <UserList ref="userListRef" />
        </el-tab-pane>
        <el-tab-pane label="角色管理" name="role">
          <RoleList ref="roleListRef" />
        </el-tab-pane>
        <el-tab-pane label="权限管理" name="permission">
          <PermissionList ref="permissionListRef" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </el-scrollbar>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import UserList from './UserList.vue'
import RoleList from './RoleList.vue'
import PermissionList from './PermissionList.vue'
import { useUserStore } from '../../../store/user'

const userStore = useUserStore()

/**
 * 默认活跃标签页为用户管理
 */
const activeTab = ref('user')
const userListRef = ref()
const roleListRef = ref()
const permissionListRef = ref()

/**
 * 标签页切换时刷新对应列表数据
 */
const refreshCurrentList = () => {
  if (userStore.token) {
    if (activeTab.value === 'user' && userListRef.value) {
      userListRef.value.getList?.()
    } else if (activeTab.value === 'role' && roleListRef.value) {
      roleListRef.value.getList?.()
    } else if (activeTab.value === 'permission' && permissionListRef.value) {
      permissionListRef.value.getList?.()
    }
  }
}
</script>
